<template>
  <div class="setting-color">
    <setting-win is-text />
    <div class="mb10">
      <div>{{ $t('setting.selectColor') }}</div>
    </div>
    <system-select :value="systemSettingStore.$state.deskTheme" :list="themeList" @change="changeTheme" />
    <div class="mb10 pt40">
      <div>{{ $t('setting.selectLanguage') }}</div>
    </div>
    <system-select :value="currentLang" :list="languageList" @change="changeLang" />
  </div>
</template>

<script setup lang="ts">
import SettingWin from '@/components/systemWindow/systemSetting/settingWin.vue'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useSystemSettingStore } from '@/stores/desk/systemSetting'
import { useChangeI18nHook } from '@/language'
import type { DeskTheme } from '@/stores/desk/systemSetting'

const i18n = useI18n()
const { changeLang, currentLang } = useChangeI18nHook()
const systemSettingStore = useSystemSettingStore()

const themeList = computed(() => [
  { label: i18n.t('default.dark'), value: 'dark' },
  { label: i18n.t('default.light'), value: 'light' }
])

const languageList = computed(() => [
  { label: i18n.t('lang.english'), value: 'en' },
  { label: i18n.t('lang.chinese'), value: 'zh' }
])

const changeTheme = (theme: DeskTheme) => {
  systemSettingStore.setDeskTheme(theme)
  document.body.dataset.theme = theme
}
</script>

<style scoped lang="scss">
.setting-color {
}
</style>
